<template>
	<view class="page">
		<!-- <fu-custom :isBack="true" :isBottom="true" bgColor="bg-white">
			<view slot="content">{{i18n["绑定银行卡"]}}</view>
		</fu-custom> -->
    <view class="hint-box">
    	<image class="img" src="../../../../static/hint.png" mode=""></image>
			<text>仅支持退款到储蓄卡</text>
    </view>
		<view class="form-box">
			<view class="list-box border">
				<view class="lable-text">
					银行卡号
					<text class="text">*</text>
				</view>
				<input class="flex-sub" type="number" v-model="cardInfo.card_no"  placeholder="请输入银行卡号" maxlength="21"
					placeholder-style="color:#BFBFBF;font-size:28rpx;" />
			</view>
			
			<view class="list-box border">
				<view class="lable-text">
					开户银行
					<text class="text">*</text>
				</view>
				<input class="flex-sub" type="text" v-model="cardInfo.card_bank"  placeholder="请输入开户银行" maxlength="21"
					placeholder-style="color:#BFBFBF;font-size:28rpx;" />
			</view>
			<view class="list-box ">
				<view class="lable-text">
					持卡人
					<text class="text">*</text>
				</view>
				<input class="flex-sub" type="text" v-model="cardInfo.card_name"  placeholder="请输入持卡人姓名" maxlength="21"
					placeholder-style="color:#BFBFBF;font-size:28rpx;" />
			</view>
		</view>
		<view class="btn" @click="handleSubmit">
			申请退款
		</view>
	</view>
</template>
<script>
  let getCardName = require('./libs/index.js');
	export default {
		data() {
			return {
        cardInfo: {
          card_name: '',
          card_bank: '',
          card_no: '',
        }, // 银行卡信息
				id:'', //银行卡id
			}
		},
		onLoad: function(options) {
      this.get_withdraw_account();
      console.log(getCardName)

		},
		methods: {
			handleSubmit() {
				if(this.cardInfo.card_name.trim() == '') return this.$message.info("请输入持卡人姓名");
				if(this.cardInfo.card_no.trim() == '') return this.$message.info("请输入银行卡号");
				if(this.cardInfo.card_bank.trim() == '') return this.$message.info("请输入开户行");
				this.$api.post(global.apiUrls.marginRefund, this.cardInfo)
					.then(res => {
						console.log('申请退款', res)
						if (res.data.code == 1 ) {
							this.cardInfo = {
								card_name: '',
								card_bank: '',
								card_no: '',
							}
							this.$util.showModal({
							  title: '操作成功',
							  content: '保证金将在1-5个工作日到账',
							  confirmColor: this.$store.state.themeColor,
							  success: res => {
									uni.navigateBack();
									// uni
							    // if (res.confirm) {
							    //   // that.$store.commit('logout');
							    //   // uni.navigateBack();
							    //   // that.$store.dispatch('getCartList');
							    // }
							  }
							});
							
						}
					})
					.catch(err => {
						this.$message.info(res.data.msg);
						console.log(err)
					})
			},
      /**
       * @author dengdongfang
       * @date 2021-5-26
       * @description 失焦校验银行卡号是否正确，在正确的情况下获取银行名称
       */
      blur(){
        // #ifndef MP-WEIXIN
        const {username,cardname,account_id,cardbank} = this.cardInfo;
        let that = this;
        if(account_id.trim()){
          getCardName.getBankBin(account_id,(err,res)=>{
            console.log(err)
            if(!res){
              that.$message.info(err);
              that.cardInfo.cardname = '';
            }else{
              that.cardInfo.cardname = res.bankName;
            }
          })
        }
        // #endif
      },
      // 提交绑定信息
      // handleSubmit(){
      //   this.$util.debounce(() => {
      //     const {username,cardname,account_id,cardbank} = this.cardInfo;
      //     if(username.trim() == '') return this.$message.info(this.i18n["请输入真实姓名"]);
      //     if(cardname.trim() == '') return this.$message.info(this.i18n["请输入银行名称"]);
      //     if(account_id.trim() == '') return this.$message.info(this.i18n["请输入银行卡号"]);
      //     if(cardbank.trim() == '') return this.$message.info(this.i18n["请输入开户行"]);
      //     // if(!this.$validate(account_id.trim(),'card')) return this.$message.info("银行卡号格式错误");
      //     this.$api.post(global.apiUrls.postBindWithdrawAccount,{
      //       true_name: username.trim(),
      //       cardname: cardname.trim(),
      //       account_type: 3,
      //       is_default: 1,
      //       account_id: account_id.trim(),
      //       cardbank:cardbank.trim()
      //     }).then(res => {
      //       console.log(res)
      //       if(res.data.code == 1){
      //         this.$message.info(this.i18n['绑定成功']);
      //         setTimeout(()=>{
      //           uni.navigateBack({
      //             delta:1
      //           })
      //         })
      //       }
      //     }).catch(err => {
      //       console.log(err)
      //     })
      //   },1000,true)
      // },

			select_bank(){
				this.$refs.selector.show()
			},
			onCancel(){
				this.$refs.selector.hide()
			},
			onConfirm(item){
				if(item.result=='bank_id') return;
				this.info.bank_name = item.result;
				this.info.bank_id = item.value;
			},
			SwitchA(){
				//选择设为默认
				this.info.is_default = !this.info.is_default;
				// this.info.is_default = this.info.is_default == 0 ? this.info.is_default = 1 : 0 ;
				// console.log(this.info.is_default)
			},
			get_withdraw_account() {	//获取用户已绑定的账户信息
				this.$api.get(global.apiUrls.getWithdrawAccount, {
					account_type: 3
				}).then(res => {
					console.log(res,'请求');
          res = res.data;
					if (res.code == 1) {
						this.cardInfo.username = res.data.true_name;
						this.cardInfo.account_id = res.data.account_id;
						this.cardInfo.cardname = res.data.cardname;
            this.cardInfo.cardbank = res.data.cardbank;


					}
				});
			},
			//获取银行列表
			get_bank_list() {
				this.$Request.get(this.$api.money.get_bank_list, {}).then(res => {
					if (res.code == 1) {
						this.bank_list = res.data
					}else{

					}
				});
			},
			bind_withdraw_account() {	//提交绑定
				let data = this.info;
				if( data.true_name == '' ){
					this.$Common.toast(this.i18n['请输入真实姓名']);
					return false;
				}
				if( data.account_id == '' ){
					this.$Common.toast(this.i18n['请输入银行卡号']);
					return false;
				}
				if( data.bank_id == '' ){
					this.$Common.toast(this.i18n['请选择银行']);
					return false;
				}
				if( data.open_name == '' ){
					this.$Common.toast(this.i18n['请输入开户行']);
					return false;
				}
				if( data.qrcode == '' ){
					this.$Common.toast(this.i18n['请上传银行卡正面照片']);
					return false;
				}
				data.account_type = 3;	//账户类型 1 微信 2 支付宝 3 银行卡
				data.is_default = 1;	//设为默认
				console.log(data,'提交');
				this.$Request.post(this.$api.money.bind_withdraw_account, data).then(res => {
					this.$Common.toast(res.msg);
					if (res.code == 1) {
						setTimeout(()=>{
							uni.navigateBack();
						},1500)
					}
				});
			},
			selectImg1: function() {	//选择图片
				this.$Request.uploadImg((res)=>{
					console.log(res,'上传图片');
					if( res.code == '1' ){
						this.info.qrcode = res.data[0].path
					}
					this.$Common.toast(res.msg)
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
.hint-box {
	display: flex;
	justify-content: start;
	align-items: center;
	padding: 0 30rpx;
	height: 80rpx;
	// background-color: #4E8CEE;
	background: rgba(78,140,238,0.08);
	font-size: 30rpx;
	color: #000;
	.img {
		margin-right: 20rpx;
		width: 36rpx;
		height: 36rpx;
	}
}
.form-box {
	padding: 0 20rpx;
	background-color: #fff;
	.list-box {
		height: 100rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		.lable-text {
			width: 180rpx;
			// margin-top: 40rpx;
			font-size: 30rpx;
			color: #333333;
			.text {
				position: relative;
				top: -6rpx;
				color: #FE443E;
			}
		}
	}
	.border {
		border-bottom: 1rpx solid #DBDBDB;
	}
}
.btn{
	margin: 100rpx 30rpx 0;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	background: linear-gradient( 180deg, #409EFF 0%, #4E8CEE 100%);
}
</style>
